<script setup lang="ts">
import { useShowPrescription } from '@/composable'
import type { recordList } from '@/types/consult'
import {
  showConfirmDialog,
  showFailToast,
  showSuccessToast,
  type PopoverAction
} from 'vant'
import { ref } from 'vue'
import { delOrder } from '@/services/consult'
import { useRouter } from 'vue-router'
const props = defineProps<{
  orderDetail: recordList
}>()
// 气泡弹出框
const showPopover = ref(false)
// 通过 actions 属性来定义菜单选项
const actions = [
  {
    text: '查看处方',
    disabled: props.orderDetail?.prescriptionId ? false : true
  },
  { text: '删除订单' }
]
// action项打印的是当前项的actions数据
const router = useRouter()
const onSelect = async (action: PopoverAction, index: number) => {
  if (index === 1) {
    await showConfirmDialog({
      title: '温馨提示',
      message: '您是否确认删除该订单？'
    })
    delOrder(props.orderDetail.id)
      .then(() => {
        showSuccessToast('删除成功')
      })
      .catch(() => {
        showFailToast('删除失败')
      })
    // 跳转到问诊记录页面
    router.push({ name: 'ConsultRecord' })
  }
  // 查看处方
  else {
    // 获取处方图片
    if (props.orderDetail?.prescriptionId) {
      showPrescription(props.orderDetail?.prescriptionId)
    }
  }
}
// 查看处方
const { showPrescription } = useShowPrescription()
</script>

<template>
  <van-popover
    v-model:show="showPopover"
    :actions="actions"
    @select="onSelect"
    placement="top"
  >
    <template #reference>
      <span class="left">更多</span>
    </template>
  </van-popover>
</template>

<style lang="scss" scoped></style>
